<template>
  <div>
    <!-- zcHeader 头部 -->
    <zc-header :id="1"></zc-header>
    <!-- content 内容 -->
    <div :class="['carousel-inner','banner_img']">
      <div :class="['carousel-caption','d-md-block','d-none']">
        <!--<span>申报人口：</span>-->
        <span>申报入口：</span>
        <p>
          <a @click="do_goActive(item.href,activityTypes[index].name)" v-for="(item, index) in activityTypes" :key="index"  v-text="item.WriteNumber===0?item.name+'':item.name+'（'+item.WriteNumber+'）'" style="cursor: pointer"></a>
        </p>
      </div>
    </div>

    <div :class="['container']" :style="{'min-width':'1200px!important','max-width':'1440px!important','padding-top':'20px'}">
      <img class="img-fluid" :src="zcDomain +'static/RSImg/news.png'" style="margin-bottom:40px;width: 100%;" />

      <div :class="['container-fluid','mb-5']">
        <div :class="'row'">
          <div :class="['col-md-5','d-flex','justify-content-center','align-items-center']">
            <img :src="zcDomain +'static/RSImg/p.png'" />
          </div>
          <div :class="'col-md-7'">
            <div :class="'col-md-12'" v-if="messageList.length>0">

              <div v-for="(item, index) in messageList" :key="index" :class="'row'" :style="{'margin-bottom':'1rem','cursor':'pointer'}" @click="doMessageDetails(item)">
                <span :class="'col-md-2'" :style="{'font-size':'4rem!important','color':'#d6d6d6','font-weight':'600','text-align':'center','line-height':'4rem'}" v-text="index+1"></span>
                <div :class="'col-md-10'">
                  <p :class="['d-flex','justify-content-between','align-items-center']">
                    <span :class="'clr_fz1'" v-text="item.Title"></span>
                    <span :style="{'float':'right'}" v-text="item.SubmitDate"></span>
                  </p>
                  <p :class="'of_p'" v-text="item.Content"></p>
                </div>
              </div>

            </div>
            <div  :class="'col-md-12'" v-else>
              <cmNodata_model></cmNodata_model>
            </div>
          </div>
        </div>
      </div>
      <img :data-id="_index" :src="zcDomain +'static/RSImg/zuixinziyuan.png'" :class="'img-fluid'" :style="{'margin-bottom':'40px','width':'100%'}" />
      <div :class="['col-md-12','p-0']">
        <nav :class="['navbar','navbar-expand-md']" :style="{'padding':'.6rem 0','background-color':'white','margin-bottom':'40px'}">
          <div :class="['collapse','navbar-collapse']" :style="{'position':'relative'}">
            <ul :class="['navbar-nav','mr-auto','nav','nav-tabs']">
              <li :class="'nav-item'" v-for="(item, index) in activityTypes" :key="index">
                <a :class="['nav-link',item.isActive?'active':'']" :id="item.type" v-text="item.name"  @click="doNav(item)"></a>
              </li>
            </ul>
            <a :href="more+'VueResourceNewManagement/ResourcePage_RS.html'" :class="['H_message_head_p3_span','btn','btn-outline-secondary','d-flex','justify-content-start','align-items-center']"
               :style="{'font-size':'.63rem','line-height':'1.4rem!important','display':'inline-block!important','position':'absolute','right':'20px','top':'4px'}">
              更多
              <img :src="zcDomain +'static/RSImg/centerLeft5.png'" width="16" height="16" :style="{'margin-bottom':'3px'}" />
            </a>
          </div>
        </nav>
      </div>
      <!-- 图文列表数据 -->
      <div :class="['tab-content','col-md-12','p-0']">
        <div :class="['row','content']" v-if="RList.length>0">
          <div :class="'col-md-4'" v-for="(item,index) in _index===0?RList[0].list:_index===1?RList[1].list:_index===2?RList[2].list:0" :key="index">
            <div :class="['card','mb-4','box-shadow']">
              <img :src="_index===2?zcDomain +'static/RSImg/lw.png':item.SUrl?item.SUrl:zcDomain +'static/RSImg/zy-cont2.jpg'"
                   :style="_index===2?{'width':'55%','margin':'10px auto','height':'205px','display':'block','cursor':'pointer'}:{'width':'100%','height':'225px','display':'block','cursor':'pointer'}"
                   @click="doResourceInfo(item)"
              />
              <span :class="'content_span'" v-text="item.Subject"></span>
              <div :class="'card-body'" :style="{'padding':'.65rem'}">
                <p :class="'card-title'" :style="{'font-size':'18px!important','font-weight':'600'}" v-text="item.Name"></p>
                <p :class="'card-text'">
                  <span>作者：</span>
                  <span v-text="item.Author"></span>
                </p>
                <p :class="'card-text'">
                  <span>上传时间：</span>
                  <span v-text="item.EntryTime.split(' ')[0]"></span>
                </p>
                <p :class="'card-text'">
                  <span>所属活动：</span>
                  <span v-text="item.ProjectResourceName"></span>
                </p>
                <div :class="['d-flex','justify-content-start','align-items-center']">
                  <p :class="'pr-5'" :style="{'margin-bottom':'0'}">
                    <span>点击：</span>
                    <span v-text="item.ClickNumber"></span>
                  </p>
                  <p :class="['d-flex','justify-content-start','align-items-center']" :style="{'margin-bottom':'0'}">
                    <span>评分：</span>
                    <span :class="'level'">
											<i v-for="(list,idx) in 5" :key="idx" :class="list>item.EvaluatValue?'level_hollow':'level_solid'"></i>
										</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div :class="['row','content']" v-else>
          <cmNodata_model></cmNodata_model>
        </div>
      </div>

    </div>
    <!-- 网站统计栏 -->
    <div :class="'carousel-inner'" :style="{'min-width':'1200px!important'}">
      <img :class="'img-fluid'" :src="zcDomain+'/static/RSImg/b-1.png'" :style="{'margin':'40px 0','min-width':'1200px!important','height':'200px','width':'100%'}"/>
      <div :class="'text-center'" :style="{'font-weight':'600','position':'absolute','top':'69px','left':'0','display':'inline-block','width':'100%'}">
        <div v-for="(item,idx) in statisticsList" :key="idx" :class="'text-center-item'">
          <div :style="{'padding':'40px 0','display':'inline-block'}">
            <img :src="item.url" width="58" height="59"/>
            <div :class="['pl-3','pr-3']" :style="{'float':'right','display':'inline-block'}">
              <p :style="{'margin-bottom':'.1rem','color':'#fff','font-size':'2rem!important','line-height':'1.2'}" v-text="item.Number"></p>
              <span v-text="item.Name"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- zcFooter 脚部 -->
    <zcFooter></zcFooter>
  </div>
</template>

<script>
  import zcHeader from './../components/zcHeader'
  import zcFooter from './../components/zcFooter.vue'
  import cmNodata_model from './common/cmNodata_model'

  export default ({
    name:'yw_Home',
    data() {
      return {
        more:this.$ZcPublic.Server.ServerUrl,
        zcDomain:this.$ZcPublic.Domain,
        activityTypes:[
          {name:'优质课展评',href:'/bsActivePage',WriteNumber:0,type:'Er',isActive:true,Id:0},//WriteNumber_2
          {name:'优秀课例评选',href:'/bsActivePage',WriteNumber:0,type:'Le',isActive:false,Id:1},//WriteNumber_3
          {name:'优秀论文',href:'/bsActivePage',WriteNumber:0,type:'Paper',isActive:false,Id:2}//WriteNumber_1
        ],
        messageList:[],
        rListStatus:0,
        RList:[],
        statisticsList:[
          {
            url:this.$ZcPublic.Domain+'/static/RSImg/zc-1.png',
            Name:'注册人数',
            Number:0
          },
          {
            url:this.$ZcPublic.Domain+'/static/RSImg/zy-1.png',
            Name:'资源总数',
            Number:0
          },
          {
            url:this.$ZcPublic.Domain+'/static/RSImg/dy-1.png',
            Name:'注册单位数',
            Number:0
          }
        ]
      }
    },
    mounted () {
      this.init();
    },
    created(){
      // console.log('vue',this.$set)
    },
    methods: {
      init() { //初始化数据函数
        try{
          let _this = this;
          _this.$ZcPublic.Server.Post({
            IsNeedLogin:'false',
            Paras:{
              Name: 'Vue_CustomerResource',
              Action: 'Ext_HomePage_RS',
              Data:{}
            },
            Callback:_this.cb_HomePage_RS,
            Scope:_this
          })

        }catch(e){
          //TODO handle the exception
          //alert(e)
        }
      },
      do_goActive(href,item){
        this.$router.push(href)
        sessionStorage.setItem("projectType",item)
      },
      doNav(item) {
        let _this = this;
        for(let list in _this.activityTypes){
          _this.activityTypes[list].isActive = false;
        }
        item.isActive = true;
        console.log('==',item.Id)
        _this.rListStatus = item.Id;
      },
      doMessageDetails(item){ //处理新闻列表跳转方法
        console.log('跳转成功',item)
        let url = this.$ZcPublic.Server.ServerUrl+'VueResourceNewManagement/MessageDetails.html?SN='+item.SN+'&zy=true&vue=true&ver=null'
        console.log('跳转成功 = ',url)
        window.open(url)
      },
      doResourceInfo(item){
        try{
          let _this = this;
          _this.$ZcPublic.Server.Post({
            IsNeedLogin:'false',
            Paras: {
              Name: 'Vue_CustomerResource',
              Action: 'Ext_ResourceStoreClickNumber',
              UserId:_this.$ZcPublic.UserId,
              Data: {
                SN: item.SN
              }
            },
            Callback: _this.cb_ResourceStoreClickNumber,
            Scope: _this
          })

          console.log('跳转参数',item)

          sessionStorage.setItem('rsn',item.SN);
          if (item.ProjectType == '优质课展评') {
            sessionStorage.setItem('rtype','ys');
          }else if (item.ProjectType == '优秀课例评选') {
            sessionStorage.setItem('rtype','yjs');
          } else if (item.ProjectType == '优秀论文') {
            sessionStorage.setItem('rtype','lw');
          }

        }catch(e){
          //TODO handle the exception
          //alert(e)
        }
      },
      def_formatDate(date){ //日期 "/Date(1526886413000+0800)/"格式 转换为 yy-mm-dd 格式方法
        let _this = this;
        let time = parseInt(date.slice(6,19));
        let d = new Date(time);
        return d.toJSON().split('T')[0];
      },
      // ------------------回调----------------------
      cb_HomePage_RS(resJson,scope) {
        let _this = this;
        try{
          console.log('首页数据',resJson)

          // 统计显示
          _this.statisticsList[0].Number = resJson.data.UserNumber;
          _this.statisticsList[1].Number = resJson.data.ResourcNumber;
          _this.statisticsList[2].Number = resJson.data.WorkUnitNumber;
          // 申报入口数据绑定
          _this.activityTypes[0].WriteNumber = resJson.data.WriteNumber_2;
          _this.activityTypes[1].WriteNumber = resJson.data.WriteNumber_3;
          _this.activityTypes[2].WriteNumber = resJson.data.WriteNumber_1;
          // 新闻中心 -- 消息列表数据绑定
          for (var i = 0; i < resJson.data.messageList.messageList.length; i++) {
            resJson.data.messageList.messageList[i].SubmitDate = _this.def_formatDate(resJson.data.messageList.messageList[i].SubmitDate);
          }
          _this.messageList = resJson.data.messageList.messageList;

          // 资源列表数据绑定
          _this.RList = resJson.data.RList;


        }catch(e){
          //TODO handle the exception
          //alert(e)
        }
      },
      cb_ResourceStoreClickNumber (resJson,scope) {
        try{
          console.log('点击数',resJson)
          this.$router.push({path:'/yw_resourceInfo',query:{rsn:sessionStorage.getItem('rsn'),rtype:sessionStorage.getItem('rtype')}});
        }catch(e){
          //TODO handle the exception
        }
      }
    },
    computed: {
      _index() {
        return this.rListStatus
      }
    },
    components:{
      zcHeader,
      zcFooter,
      cmNodata_model
    }
  })
</script>

<style scoped>
  html, body, div, span, applet, object, iframe, a, h1, h2, h3, h4, h5, h6, p, dd, dl, dt, li, ol, ul,
  input, select, button, textarea {
    font-size: 14px!important;
  }
  p{
    margin:0;
  }
  .banner_img{
    min-width: 1200px!important;
    height: 300px;
    background-position: top center;
    background-image: url(../../static/RSImg/banner-1.png);
  }
  .carousel-caption{background:rgba(51,51,51,0.4);right:0;bottom:0;left:0;text-align:start;padding-left:200px;padding-top:10px;padding-bottom:10px;}
  .carousel-caption p{position:absolute;left:300px;right:0;top:10px;font-size:1rem;}
  .carousel-caption a{color:#fff;width:30%;display:inline-block;}
  .clr_fz1{
    color: #41bafe!important;
    font-size: .8rem;
  }
  .of_p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .col-md-12 p{color: #333 !important;font-weight: 600;}
  .col-md-10>p{margin-bottom: .6rem;}
  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    color: #41bafe !important;
    border: 0px;
    border-bottom: 2px solid #41bafe;
  }
  .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{
    color: #41bafe !important;
    border: 0px;
    border-bottom: 2px solid #41bafe;
  }
  .nav-tabs{border-bottom: 0px;}
  .nav-tabs .nav-link{border: 0px;border-bottom: 2px solid white;}
  .nav-item > a{
    color: #333;
    background-color: #fff !important;
    font-weight: 600;
    padding: 10px 0 !important;
    margin: 0 12px;
    text-decoration: none;
  }
  .btn{
    font-size: .2rem;
    line-height: .5rem;
    background-color: #41bafe;
    color: white;
    border: 1px solid #41bafe;
    border-radius: 0;
    padding: 0.33rem .75rem!important;
  }
  .btn:hover{
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
  }
  .H_message_head_p3_span{
    position: absolute;
    right: 0;
  }
  .content{
    margin: 0;
    max-height: 870px!important;
    min-height: 435px!important;
    overflow: hidden;
  }
  /* <!-- 图文列表数据 --> */
  .content_span{display:block;color:white;font-size:.58rem;position:absolute;top:1rem;right:.5rem;font-weight:600;background-color:rgba(0,0,0,.6); padding:.2rem .5rem;border-radius:.6rem;}
  .card-body > p {
    margin-bottom: 0.8rem;
    font-weight: 600;
  }
  .card-body>p>span,.d-flex>p>span{
    font-size:12px!important;
    color:#666;
  }
  /* .level .level_solid, .level .level_hollow {background-image: url('../../static/RSImg/icon2.png');background-repeat: no-repeat;display: inline-block;width: 15px;height: 15px;} */
  .level {display: flex;flex-flow: row;align-items: center;}
  .level .level_solid{background-image: url(../../static/RSImg/star1.png)!important;background-repeat: no-repeat;display: inline-block;width: 16px!important;height: 16px!important;padding:10px!important;background-position: 0px 0px!important;}
  .level .level_hollow{background-image: url(../../static/RSImg/star2.png)!important;background-repeat: no-repeat;display: inline-block;width: 16px!important;height: 16px!important;padding:10px!important;background-position: 0px 0px!important;}
  /* -------End------- */
  .text-center-item{float:left;display:inline-block;width:33.3333333%;color:#fff;}
</style>
